<template>
  <div style="padding: 20px">
    <Alert message="选框示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
    </Alert>
    <div class="demoTittle">多选框</div>
    <div class="demoTittle2">多选框组使用组件a-checkbox-group，按需求配置disabled是否禁用</div>
    <a-space direction="vertical">
      <a-space :size="60">
        <div class="color666666" style="width: 43px">default</div>
        <a-checkbox-group
          v-model:value="state.value1"
          name="checkboxgroup"
          :options="plainOptions"
        />
      </a-space>
      <a-space :size="60">
        <div class="color666666" style="width: 43px">disable</div>
        <a-checkbox-group
          v-model:value="state.value2"
          name="checkboxgroup"
          :options="optionsWithDisabled"
          :disabled="true"
        />
      </a-space>
      <a-space :size="60">
        <div class="color666666" style="width: 43px">hover</div>
        <a-checkbox-group v-model:value="state.value3" name="checkboxgroup" :options="options" />
      </a-space>
    </a-space>
    <div class="demoTittle">单选框</div>
    <div class="demoTittle2">单选框组使用组件a-radio-group，按需求配置disabled是否禁用</div>
    <a-space direction="vertical">
      <a-space :size="60">
        <div class="color666666" style="width: 43px">default</div>
        <a-radio-group v-model:value="state.value4" :options="plainOptionss" />
      </a-space>
      <a-space :size="60">
        <div class="color666666" style="width: 43px">disable</div>
        <a-radio v-model:checked="checked1" :disabled="true">禁用</a-radio>
      </a-space>
      <a-space :size="60">
        <div class="color666666" style="width: 43px">hover</div>
        <a-radio v-model:checked="checked">未选悬停项</a-radio>
      </a-space>
    </a-space>
    <div class="demoTittle">开关</div>
    <div class="demoTittle2"
      >开关使用组件a-switch，属性checked-children和un-checked-children配置开关文字</div
    >
    <a-space direction="vertical">
      <a-space :size="30">
        <div class="color666666" style="width: 43px">开启</div>
        <a-switch
          v-model:checked="state.checked1"
          checked-children="禁用"
          un-checked-children="启用"
        />
        <a-switch v-model:checked="state.checked1" size="small" />
      </a-space>
      <a-space :size="30">
        <div class="color666666" style="width: 43px">关闭</div>
        <a-switch
          v-model:checked="state.checked2"
          checked-children="禁用"
          un-checked-children="启用"
        />
        <a-switch v-model:checked="state.checked2" size="small" />
      </a-space>
    </a-space>
    <div class="demoTittle">按钮样式</div>
    <div class="demoTittle2">使用组件a-radio-group，属性button-style设置为solid改变按钮样式</div>
    <a-space :size="60" align="start">
      <a-space direction="vertical">
        <a-radio-group v-model:value="value1" button-style="solid" class="height40">
          <a-radio-button value="a">选项一</a-radio-button>
          <a-radio-button value="b">选项二</a-radio-button>
          <a-radio-button value="c">选项三</a-radio-button>
          <a-radio-button value="d">选项四</a-radio-button>
        </a-radio-group>
        <a-radio-group v-model:value="value2" button-style="solid" class="height36">
          <a-radio-button value="a">选项一</a-radio-button>
          <a-radio-button value="b">选项二</a-radio-button>
          <a-radio-button value="c">选项三</a-radio-button>
          <a-radio-button value="d">选项四</a-radio-button>
        </a-radio-group>
        <a-radio-group v-model:value="value3" button-style="solid">
          <a-radio-button value="a">选项一</a-radio-button>
          <a-radio-button value="b">选项二</a-radio-button>
          <a-radio-button value="c">选项三</a-radio-button>
          <a-radio-button value="d">选项四</a-radio-button>
        </a-radio-group>
        <a-radio-group v-model:value="value4" button-style="solid" class="height28">
          <a-radio-button value="a">选项一</a-radio-button>
          <a-radio-button value="b">选项二</a-radio-button>
          <a-radio-button value="c">选项三</a-radio-button>
          <a-radio-button value="d">选项四</a-radio-button>
        </a-radio-group>
        <a-radio-group v-model:value="value5" button-style="solid" class="height24">
          <a-radio-button value="a">选项一</a-radio-button>
          <a-radio-button value="b">选项二</a-radio-button>
          <a-radio-button value="c">选项三</a-radio-button>
          <a-radio-button value="d">选项四</a-radio-button>
        </a-radio-group>
      </a-space>
      <a-space direction="vertical">
        <a-radio-group v-model:value="value6" class="height40">
          <a-radio-button value="a">选项一</a-radio-button>
          <a-radio-button value="b">选项二</a-radio-button>
          <a-radio-button value="c">选项三</a-radio-button>
          <a-radio-button value="d">选项四</a-radio-button>
        </a-radio-group>
        <a-radio-group v-model:value="value7" class="height36">
          <a-radio-button value="a">选项一</a-radio-button>
          <a-radio-button value="b">选项二</a-radio-button>
          <a-radio-button value="c">选项三</a-radio-button>
          <a-radio-button value="d">选项四</a-radio-button>
        </a-radio-group>
      </a-space>
    </a-space>
    <div class="demoTittle">带有边框</div>
    <div class="demoTittle2"
      >使用组件a-radio，边框自定义，class为allbox,禁用是新增class为disabled,设置disabled为true</div
    >
    <a-space direction="vertical" :size="30">
      <a-radio-group v-model:value="value8">
        <a-space :size="8">
          <div class="allBox"><a-radio :value="1">选项一</a-radio></div>
          <div class="allBox"><a-radio :value="2">选项二</a-radio></div>
          <div class="allBox"><a-radio :value="3">选项三</a-radio></div>
          <div class="allBox disabled"><a-radio :value="4" :disabled="true">选项四</a-radio></div>
        </a-space>
      </a-radio-group>
      <a-checkbox-group v-model:value="value9">
        <a-space :size="8">
          <div class="allBox"><a-checkbox value="1">选项一</a-checkbox></div>
          <div class="allBox"><a-checkbox value="2">选项二</a-checkbox></div>
          <div class="allBox"><a-checkbox value="3">选项三</a-checkbox></div>
          <div class="allBox disabled"
            ><a-checkbox value="4" :disabled="true">选项四</a-checkbox></div
          >
        </a-space>
      </a-checkbox-group>
      <a-radio-group v-model:value="value10" optionType="button" size="large">
        <a-space :size="8">
          <a-radio :value="1" class="buttonRadius">选项一</a-radio>
          <a-radio :value="2" class="buttonRadius">选项二</a-radio>
          <a-radio :value="3" class="buttonRadius">选项三</a-radio>
          <a-radio :value="4" class="buttonRadius disabled" :disabled="true">选项四</a-radio>
        </a-space>
      </a-radio-group>
    </a-space>
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import { reactive, ref } from 'vue';
  const state = reactive({
    value1: ['已选中项'],
    value2: ['已选失效项'],
    value3: [],
    value4: '已选中项',
    value5: '禁用',
    checked1: true,
    checked2: false,
  });
  const value1 = ref<string>('b');
  const value2 = ref<string>('b');
  const value3 = ref<string>('b');
  const value4 = ref<string>('b');
  const value5 = ref<string>('b');
  const value6 = ref<string>('b');
  const value7 = ref<string>('b');
  const value8 = ref<number>(3);
  const value9 = ref([]);
  const value10 = ref<number>(3);

  const checked = ref<boolean>(false);
  const checked1 = ref<boolean>(true);
  const plainOptions = [
    { label: '未选中项', value: '未选中项' },
    { label: '已选中项', value: '已选中项' },
    { label: '半选', value: '半选', indeterminate: true },
  ];
  const plainOptionss = [
    { label: '未选中项', value: '未选中项' },
    { label: '已选中项', value: '已选中项' },
  ];
  const optionsWithDisabled = [
    { label: '未选失效项', value: '未选失效项' },
    { label: '已选失效项', value: '已选失效项' },
  ];
  const options = [{ label: '未选悬停项', value: '未选悬停项' }];
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
    margin-bottom: 18px;
  }
  .color666666 {
    color: #666666;
  }
  .height40 .ant-radio-button-wrapper {
    height: 40px;
    line-height: 40px;
  }
  .height36 .ant-radio-button-wrapper {
    height: 36px;
    line-height: 36px;
  }
  .height28 .ant-radio-button-wrapper {
    height: 28px;
    line-height: 28px;
  }
  .height24 .ant-radio-button-wrapper {
    height: 24px;
    line-height: 24px;
  }
  .allBox {
    border-radius: 4px;
    border: 1px solid #e4e4e4;
    padding: 10px 0 10px 16px;
    color: #444;
  }
  .allBox:hover {
    background: #f2f6fc;
    color: #444;
  }
  .disabled:hover {
    background: #f5f6f7 !important;
  }
  .allBox .ant-checkbox-wrapper {
    margin-inline-end: 8px;
  }
  .ant-radio-button-wrapper.buttonRadius {
    border-radius: 20px;
    padding: 0 28px;
  }
</style>
